<template>
	<div class="editphone">
		<div class="content">
			<div class="step f_row">
				<div class="f_cell">
					<span>验证原手机号</span>
					<strong v-bind:class="{ 'on': step1== 1 }"  >1</strong>
				</div>

				<div class="f_cell">
					<span>设置新手机</span>
					<strong v-bind:class="{ 'on': step1== 2 }"  >2</strong>
				</div>

				<div class="f_cell">
					<span>完成</span>
					<strong v-bind:class="{ 'on': step1== 3 }"  >3</strong>
				</div>
			</div>

			<div class="input_con" v-show=" step1==1 ">
				<div class="f_row line">
					<div class="f_cell" style="width: 180px;">原手机号码:</div>
					<div class="f_cell red_txt">
						{{phoneData.ophone}}
					</div>
				</div>

				<div class="f_row line">
					<div class="f_cell">
						<input type="text" v-model=" phoneData.verify_code " placeholder="请输入图形验证码" value=""  />
					</div>
					<div class="f_cell"  style="width: 220px;">
						<img v-show=" verify_img.show " style="border-radius:4px;height: 35px;width:  100%;vertical-align:  middle;"  src="{{verify_img.src}}" @click="reloadImg"  />
						<!-- <img class="verify" v-show="show_img"  src="{{img_src}}"  @click="reloadImg" /> -->
					</div>
				</div>

				<div class="f_row">
					<div class="f_cell">
						<input type="text"  v-model=" phoneData.phone_code " placeholder="请输入手机验证码" value=""  />
					</div>
					<div class="f_cell"  style="width: 220px;">
						<!-- <button class="red_btn" @click=" smsOriginal ">获取验证码</button> -->
						<span   @click=" smsOr "  v-bind:class="{ 'red_btn':!smsData.disableBtn, 'grey_btn':smsData.disableBtn }" >{{ smsData.btnTxt }}</span>
					</div>
				</div>
			</div>

			<div class="input_con"  v-show=" step1==2 ">
				<div class="f_row line">
					<div class="f_cell" style="width: 180px;">新手机号码:</div>
					<div class="f_cell red_txt">
						<input type="text"  v-model=" phoneData.phone " placeholder="请输入新的手机号码" value=""  />
					</div>
				</div>

				<div class="f_row line">
					<div class="f_cell">
						<input type="text" v-model=" phoneData.verify_code " placeholder="请输入图形验证码" value=""  />
					</div>
					<div class="f_cell"  style="width: 220px;">
						<img v-show=" verify_img.show " style="border-radius:4px;height: 35px;width:  100%;vertical-align:  middle;"  src="{{verify_img.src}}" @click="reloadImg"  />
						<!-- <img class="verify" v-show="show_img"  src="{{img_src}}"  @click="reloadImg" /> -->
					</div>
				</div>


				<div class="f_row">
					<div class="f_cell">
						<input type="text" v-model=" phoneData.phone_code " placeholder="请输入手机验证码" value=""  />
					</div>
					<div class="f_cell"  style="width: 220px;">
						<!-- <button class="red_btn">获取验证码</button> -->
						<span   @click=" smsN "  v-bind:class="{ 'red_btn':!smsData.disableBtn, 'grey_btn':smsData.disableBtn }" >{{ smsData.btnTxt }}</span>
					</div>
				</div>
			</div>


			<div class="result"   v-show=" step1==3 ">
				<i class="iconfont">&#xe638;</i>
				<div>
					恭喜您, 手机号码修改成功
				</div>
			</div>

		</div>
		<div class="btn_con">
			<button @click="nextStep" class="next_step red_btn"  v-show=" step1==1 || step1==2 ">下一步</button>
			<button @click="nextStep" class="next_step grey_btn"  v-show=" step1==2 "  >取消</button>
		</div>

		<div class="NoteCode">
			<h3>Tips:</h3>
			<p>1、若原手机收不到验证码，请联系客服协助修改</p>
			<p>2、<strong>此处手机号码为登录有喜财富手机号码, 如修改华兴银行手机号码需要下载投融资平台APP进行修改。</strong></p>
		</div>


		<div class="qrcodeCon">
			<h3>投融资平台APP下载二维码</h3>
			<div class="qrcode">
				<img src="../../assets/images/user/ghbank_qrcode.png" />
			</div>
		</div>

		<alert :show.sync=" alertMsg.show "  title="提示"  button-text="确定">{{alertMsg.msg}}</alert>
	</div>
</template>
<script>
//import { Group, Step, StepItem, Xbutton } from 'vux'
var time_work = null;
import {Alert} from 'vux'
import api from '../../data/api'
import { mapGetters } from 'vuex'
export default {

	data(){
		return {
			passed:false,
			busy:false,
			step1: 1,
			phoneData: {
				ophone:'',
				phone:'',
				verify_code:'', 	// 验证码
				phone_code:'',	// 手机验证码
				old_token:'',	// 旧手机token,唯一验证
				new_token:''
			},
			alertMsg: {
				msg:'',
				show:false
			},
			verify_img: { show:true, src:'' },
            smsData: {
				stop:false,
				disableBtn:false,
				btnTxt:"获取动态码",
				timer:0
			}
		}
	},

    computed: {
      ...mapGetters([
		  'loginStatus',
          'userInfo',
          'userProfile'
      ])
	},

	components: {
		Alert
	},

	methods: {
		goback(){
			this.$route.router.go('/user');
		},

		nextStep () {
			/* if(!this.passed){
				this.alertMsg.msg = '请填完相关信息，谢谢!';
				this.alertMsg.show = true;
				return;
			} */

			switch (this.step1) {
				case 1:
				this.verify_o_phone()
				break;

				case 2:
				this.updatePhone()
				break;
			}
			this.passed = false;
			//this.step1++;
			//console.log(this.step1)
		},


		reloadImg(){
			this.verify_img.show = false;
			this.verify_img.src = '';
			var vm = this;
			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;
			var rkey = vm.global.r_key()
			var pkey = vm.global.p_key()
			setTimeout(function(){
			    vm.verify_img.show = true;
			    vm.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			},10);
        },


	    updateSms () {

	    	console.log('get ')
	        if(this.smsData.timer <= 0)
	        {
				this.stopTimeCount('重新发送');
	        }
	        else{
	            this.smsData.timer--;
	            this.smsData.btnTxt = '剩余'+this.smsData.timer+'秒';
	        }

	    },

		stopTimeCount(str){
			clearInterval(time_work);
			this.smsData.timer  = 0;
			this.smsData.stop = false;
			this.smsData.disableBtn = false;
			this.smsData.btnTxt = str;
			//str = '重新发送'
		},

	    startTimer () {
			clearInterval(time_work);
			//if(this.msn.timer>0) return;
			if(this.smsData.timer == 0)	this.smsData.timer = 60;
	        if(this.smsData.stop == false)
	        {
				time_work = setInterval(this.updateSms,1000);
	        }
	        else
	        {
				clearInterval(time_work);
	        }

		},

		updatePhone(){
			var vm = this;
			if( this.phoneData.verify_code == '' || this.phoneData.old_token == '' || this.phoneData.new_token == '' || this.phoneData.phone == '' || this.phoneData.phone_code == ''){
				this.alertMsg.msg = '请填完相关信息，谢谢!';
				this.alertMsg.show = true;
				return;
			};

			api.user.update_phone(this.phoneData).then( res => {
				if(res.status){
					vm.step1 = 3;
					setTimeout(function() {
						vm.$route.router.go('/user');
					}, 2000);
				}else{
					this.alertMsg.msg = res.msg
					this.alertMsg.show = true;
				}
			});
		},

		verify_o_phone(){

			if(this.busy) return;
			var vm = this;
			if( this.phoneData.verify_code == '' || this.phoneData.phone_code == '' || this.phoneData.old_token == ''){
				this.alertMsg.msg = '请填完相关信息，谢谢!';
				this.alertMsg.show = true;
				return;
			};

			this.busy = true;
			api.user.verify_original_phone(this.phoneData).then( res => {
				vm.busy = false;

				if(res.status){
					vm.step1 = 2;
					vm.passed = true;
					vm.phoneData.verify_code = '';
					vm.phoneData.phone_code = '';
					vm.phoneData.old_token = res.old_token;
					vm.stopTimeCount('获取验证码');
				}else{
					vm.passed = false;
					vm.alertMsg.msg = res.msg;
					vm.alertMsg.show = true;
				}
			});

		},

		smsN(){
			if(this.busy) return;
			var vm = this;

			if( this.phoneData.phone == '' ||  this.phoneData.old_token == '' || this.phoneData.verify_code == ''){
				this.alertMsg.msg = '请填完相关信息，谢谢!';
				this.alertMsg.show = true;
				return;
			}

			if(this.smsData.disableBtn){
				return;
			}
			console.log('sentSMS');
			this.smsData.disableBtn = true, this.startTimer();
			this.getCodeByN();
		},


		smsOr(){
			if(this.busy) return;
			var vm = this;

			if( this.phoneData.verify_code == ''){
				this.alertMsg.msg = '请填完相关信息，谢谢!';
				this.alertMsg.show = true;
				return;
			}

			if(this.smsData.disableBtn){
				return;
			}
			console.log('sentSMS');
			this.smsData.disableBtn = true, this.startTimer();
			this.getCodeByOr();
		},


        getCodeByN(){
            var vm = this;
			if(this.busy){
				return;
			}
			this.busy = true;
			//this.$store.dispatch('setShowLoading', true);
			api.user.send_sms_by_verify_new_phone(this.phoneData).then( res => {
				//console.log(res);
				vm.busy = false;
				//vm.$store.dispatch('setShowLoading', false);
				if(res.status){
					vm.passed = true;
					vm.phoneData.old_token = res.old_token;
					vm.phoneData.new_token = res.new_token;
				}else{
					//alert(res.msg);
					vm.alertMsg.msg = res.msg
					vm.alertMsg.show = true;

                    vm.reloadImg();
                    vm.phoneData.verify_code = '';
					vm.stopTimeCount('重新发送');

				}
			});
        },

        getCodeByOr(){
            var vm = this;
			if(this.busy){
				return;
			}
			this.busy = true;
			//this.$store.dispatch('setShowLoading', true);
			api.user.send_sms_by_verify_original_phone(this.phoneData).then( res => {
				//console.log(res);
				vm.busy = false;
				//vm.$store.dispatch('setShowLoading', false);
				if(res.status){
					vm.passed = true;
					vm.phoneData.old_token = res.old_token;
				}else{
					//alert(res.msg);
					vm.alertMsg.msg = res.msg
					vm.alertMsg.show = true;

                    vm.reloadImg();
                    vm.phoneData.verify_code = '';
					vm.stopTimeCount('重新发送');

				}
			});
        },



		/* api.user.modify_phone({phone:'123'}).then( res => {
			console.log(res)
		}) */
	},
	route:{
		activate(transition){
			transition.next();

        var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000;

        var rkey = this.global.r_key()
        var pkey = this.global.p_key()

        //this.img_src = c_reg_verify_img+'&t='+timestamp
        this.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;

			/* api.com.index().then( res => {
				console.log(res)
			}) */

			/* api.user.modify_phone({phone:'123', password:'112'}).then( res => {
				console.log(res)
			}) */

			//console.log(this.userProfile)

			if(JSON.stringify(this.userProfile) != "{}" && this.userProfile!=undefined){
				this.phoneData.ophone = this.userProfile.auth_phone
			}
		}
	}


}
</script>

<style lang="scss" scoped>
@import '../../assets/sass/mixins';
.editphone{
	.qrcodeCon{
		h3{
			background-color: #aa282f;
			width: 180px;
			margin:auto;
			text-align: center;
			color:#fff;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			font-size: 13px;
			position: relative;
			margin-bottom:10px;
			&:after{
				content:' ';
				position: absolute;
				border-width: 10px 10px 0;
				border-left-color: transparent;
				border-right-color: transparent;
				border-top-color: #aa282f;
				border-style: solid;
				bottom:-12px;
				left:50%;
				z-index: 99;
				transform: translate(-50%, -50%);
			}
		}
		.qrcode{
			width: 40%;
			margin:auto;
			img{
				width: 100%;
			}
		}
	}
	.NoteCode{
		background-color: #eae9e9;
		padding:10px 20px;
		font-size:14px;
		color:#7d7d7d;
		margin-bottom:10px;
		h3{
			font-size:16px;
		}
		strong{
			font-weight: bold;
		}
	}
	.content{
		margin-bottom:20px;
	}
	.result{
		text-align: center;
		font-size: 16px;
		color:#414141;

		i{
			font-size:50px;
			color: #ff8080;
			margin:auto;
			display: inline-block;
			height: 70px;

		}
	}
	.btn_con{
		width: 60%;
		margin:auto;
	}
	.next_step{
		font-size:20px;
		line-height: 45px;
		height: 45px;
		display: block;
		width: 100%;
		margin-bottom:12px;
	}
	.red_btn, .grey_btn{
		background-color: #ff8080;
		border: none;
		color: #fff;
		border-radius: 4px;
	}
	.grey_btn{
		background-color: #c5c4c4;
	}
	.input_con{
		background:#fff;
		font-size:16px;
		line-height: 50px;
		.red_txt{
			color:#ff8080;
		}
		.f_row{
			width: 100%;
			margin:auto;
			padding: 0px 15px;
		}
		.f_row.line{

			position: relative;
			&:after{
				content: ' ';
				border-bottom:1px solid #e0e0e0;
				position: absolute;
				display: block;
				bottom:0;
				width: 100%;
				left:0;
			}
		}
		.f_cell{
			input{
				width: 100%;
				line-height: 35px;
				border:none;
			}
			button, .red_btn, .grey_btn{
				width: 100%;
				line-height: 35px;
				font-size:16px;
			}
			.red_btn, .grey_btn{
				text-align: center;
				display: inline-block;
			}
		}
	}
	.step{
		font-size:15px;
		position: relative;
		margin-bottom:15px;
		padding:20px 15px;
		background:#fff;
		border-bottom:1px solid #e0e0e0;
		.f_cell{
			height: 58px;

		}
		span{
			display: block;
			margin-bottom:4px;
		}
		strong{
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #c5c4c4;
			display: block;
			line-height: 30px;
			font-size: 20px;
			color:#fff;
			font-weight:bold;
			margin:auto;
			position: absolute;
			z-index: 1;
			left:50%;
			transform: translate(-50%, 0);
			bottom: -5px;
			border:5px solid #fff;
			&.on{
				background-color: #ff8080;
			}
		}
		&:after{
			content:' ';
			height:1px;
			background-color: #c5c4c4;
			position: absolute;
			top:50%;
			left:50%;
			width: 70%;
			transform: translate(-50%, -50%);
			margin-top:13px;
			z-index: 0;
		}
		.f_cell{
			text-align: center;
			position: relative;
		}
	}
	.f_row{
		@include box('', 'center', 'center');
	}

	.f_cell{
		@include flex(1);
		width: 100%;
	}
}
</style>

<style lang="scss">
.weui_dialog {
    background:#fff;
}
</style>
